<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>INDEX </title>
	<link href="js/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet">
	<link href="style/main.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="source/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="source/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="roads/vue.js"></script>
	<link rel="stylesheet" href="roads/ol.css" type="text/css">
    <script src="roads/ol.js"></script>
    <script src="roads/main.js"></script>
    <style type="text/css">
    	.cc {
    		position: absolute;
    		left:0;
    		top:52px;
    		width: 100%;
    	 
    		bottom:0;
    	}

    	.sidebar{
    		border-left:1px #ccc solid;
    	}
    </style>
</head>
<body>
<div class="container-fluid p0" style="z-index:99999;">
	<nav class="navbar navbar-default header" role="navigation"> 
	    <!-- Brand and toggle get grouped for better mobile display -->
	    <div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">toggle</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-map-marker"></span> 城市道路路况系统 <span class="badge">Beta</span></a>
	    </div>
	    <!-- Collect the nav links, forms, and other content for toggling -->
	    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav navbar-right">
				<li><a href=""><span class="glyphicon glyphicon-user"></span> 管理员，你好！</a></li>
				<li class="dropdown">
				<a href="" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> 操作 <span class="caret"></span></a>
					<ul class="dropdown-menu" role="menu">
						<li><a href="" data-toggle="modal" data-target="#sign">用户注册</a></li>
						<li><a href="" data-toggle="modal" data-target="#myModal">用户登录</a></li>
						<li><a href="" data-toggle="modal" data-target="#">注销登录</a></li>
					</ul>
				</li>
			</ul>
			<ul class="nav navbar-nav">
				<li><a href="#/track"> <span class="glyphicon glyphicon-eye-open"></span> 路况分析</a></li>
				<li><a href="#/play"><span class="glyphicon glyphicon-plane"></span> 路况预测</a></li>
				<li><a href="#/guide"><span class="glyphicon glyphicon-random"></span> 道路查询</a></li> 
				<li><a href="#/play"><span class="glyphicon glyphicon-globe"></span> </a></li> 
			 
			</ul>
			<form class="navbar-form navbar-left" role="search">
				<div class="form-group">
				<input type="text" class="form-control" placeholder="Search">
				</div>
				<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
			</form>     
	    </div><!-- /.navbar-collapse -->  
	</nav>
</div>

 
<div class="container-fluid cc">
	<div class="row" style=" height:100%">
		<div class="col-md-8 p0"   style="height:100%">
			<div id="map" style="width:100%;height:100%"></div>
		</div>
		<div class="col-md-4 pt15 sidebar" style="height:100%">
			<div class="panel panel-default">
			  <div class="panel-heading">当前道路信息</div>
			  
			    	<table class="table">
						<tr>
							<th>路名</th>
							<th>采样车辆</th>
							<th>道路状态</th>
						</tr>
						<tr>
							<td>永兴路</td>
							<td>45</td>
							<td>畅通</td>
						</tr>
  					</table>
			  
			</div>
			<div class="panel panel-default">
			  <div class="panel-heading">预测参数设定</div>
			  <div class="panel-body">
			    <form class="form-horizontal">
				  <div class="form-group">
				    <label for="inputEmail3" class="col-sm-3 control-label">预测周期</label>
				    <div class="col-sm-9">
				      <div class="checkbox" style="float:left">
				        <label>
				          <input type="checkbox"> 5 min
				        </label>
				      </div>
				      <div class="checkbox" style="float:left;margin-left:10px;">
				        <label>
				          <input type="checkbox"> 10 min
				        </label>
				      </div>
				      <div class="checkbox" style="float:left;margin-left:10px;">
				        <label>
				          <input type="checkbox"> 15 min
				        </label>
				      </div>
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputPassword3" class="col-sm-3 control-label">缓存设置</label>
				    <div class="col-sm-9">
				     <div class="checkbox" style="float:left">
				        <label>
				          <input type="checkbox"> 直接读取缓存
				        </label>
				      </div>
				      <div class="checkbox" style="float:left;margin-left:10px;">
				        <label>
				          <input type="checkbox"> 重新更新缓存
				        </label>
				      </div>
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputPassword3" class="col-sm-3 control-label">聚类条件</label>
				    <div class="col-sm-9">
				      <div class="input-group">
						  <span class="input-group-addon">小于</span>
						  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
						  <span class="input-group-addon">Km时退出</span>
						</div>
				    </div>
				  </div>
				 
				</form>
			  </div>
			</div>
			<div class="panel panel-default" style="border:0">
			  <button type="button" class="btn btn-primary  ">开始预测</button> <button type="button" class="btn btn-default">终止计算</button>
			</div>
		</div><!--#SIDEBAR-->
	</div>
</div>

</body>
</html>